﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>印象城表情</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/adaptation.js"></script>
	</head>
	<body>
		<div id="wrap">
			<!--首页-->
			<div class="page page-1">
				<a href="javascript:void(0);" class="music"></a>
				<img src="img/tip.png" alt="" class="tip"/>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-btn-rule"></a>
					<a href="javascript:void(0);" class="ui-btn-gl"></a>
					<a href="javascript:void(0);" class="ui-start"></a>
				</div>
			</div>
			
			<!--游戏规则-->
			<div class="page page-2">
				<div class="side"></div>
				<span class="ui-logo"></span>
				<div class="content">
					<h3>活动规则</h3>
					<p>热河路就像八十年代的金坛县，
						梧桐垃圾灰尘和各式各样的杂货店
						人们总是早早的离开拉上卷帘门，
						在天黑前穿上衣服点一根烟　　
						热河路有一家开了好多年的理发店，
						不管剪什么样的发型你只要付五块钱
						老板和她的妹妹坐在椅子上对着镜子
						    一言不发：）
					</p>
				</div>
				<div class="bottom">
					<div class="ui-guide"></div>
					<a href="javascript:void(0);" class="ui-start"></a>
					<span class="ui-dot"></span>
				</div>
			</div>
			
			<!--主题攻略-->
			<div class="page page-3">
				<span class="ui-logo"></span>
				<div class="map-box">
					<img src="img/map.jpg" alt="" class="map"/>
					<span class="local local-1">
						<img src="img/layer-1.png" alt="" />
					</span>
					<span class="local local-2">
						<img src="img/layer-2.png" alt="" />
					</span>
					<span class="local local-3">
						<img src="img/layer-3.png" alt="" />
					</span>
					<span class="local local-4">
						<img src="img/layer-4.png" alt="" />
					</span>
					<span class="local local-5">
						<img src="img/layer-5.png" alt="" />
					</span>
					<span class="local local-6">
						<img src="img/layer-6.png" alt="" />
					</span>
					<span class="local local-7">
						<img src="img/layer-7.png" alt="" />
					</span>
				</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-home"></a>
				</div>
			</div>
			
			<!--答题页-->
			<div class="page page-4">
				<span class="ui-txt-2"></span>
				<div class="question-box">
					<div class="question question-1">
						<img src="img/question-14.jpg" alt="" />
						<ul class="answer-box">
							<li>
								<span class="item">A</span>
								<span class="answer"><i class="ui-money-1"></i></span>
							</li>
							<li>
								<span class="item">B</span>
								<span class="answer"><i class="ui-money-2"></i></span>
							</li>
							<li>
								<span class="item">C</span>
								<span class="answer"><i class="ui-money-3"></i></span>
							</li>
							<li data-type="1">
								<span class="item">D</span>
								<span class="answer"><i class="ui-money-4"></i></span>
							</li>
						</ul>
					</div>
					
					<div class="question question-2">
						<img src="img/question-10.jpg" alt="" />
						<ul class="answer-box">
							<li>
								<span class="item">A</span>
								<span class="answer"><i class="ui-emoji-1"></i></span>
							</li>
							<li data-type="1">
								<span class="item">B</span>
								<span class="answer"><i class="ui-emoji-2"></i></span>
							</li>
							<li>
								<span class="item">C</span>
								<span class="answer"><i class="ui-emoji-3"></i></span>
							</li>
							<li>
								<span class="item">D</span>
								<span class="answer"><i class="ui-emoji-4"></i></span>
							</li>
						</ul>
					</div>
					
					<div class="question question-3">
						<img src="img/question-11.jpg" alt="" />
						<ul class="answer-box">
							<li data-type="1">
								<span class="item">A</span>
								<span class="answer"><i class="ui-finger-3"></i></span>
							</li>
							<li>
								<span class="item">B</span>
								<span class="answer"><i class="ui-finger-2"></i></span>
							</li>
							<li>
								<span class="item">C</span>
								<span class="answer"><i class="ui-finger-5"></i></span>
							</li>
							<li>
								<span class="item">D</span>
								<span class="answer"><i class="ui-finger-6"></i></span>
							</li>
						</ul>
					</div>
					
					<div class="question question-4">
						<img src="img/question-12.jpg" alt="" />
						<ul class="answer-box">
							<li>
								<span class="item">A</span>
								<span class="answer">发呆</span>
							</li>
							<li>
								<span class="item">B</span>
								<span class="answer">装傻</span>
							</li>
							<li>
								<span class="item">C</span>
								<span class="answer">猪鼻子</span>
							</li>
							<li data-type="1">
								<span class="item">D</span>
								<span class="answer">沉默</span>
							</li>
						</ul>
					</div>
					
					<div class="question question-5">
						<img src="img/question-13.jpg" alt="" />
						<ul class="answer-box">
							<li data-type="1">
								<span class="item">A</span>
								<span class="answer">生男友闷气</span>
							</li>
							<li>
								<span class="item">B</span>
								<span class="answer">和男友一起开黑</span>
							</li>
							<li>
								<span class="item">C</span>
								<span class="answer">和男友继续聊，要他陪</span>
							</li>
							<li>
								<span class="item">D</span>
								<span class="answer">乖乖去睡觉</span>
							</li>
						</ul>
					</div>
					
					<div class="question question-6">
						<img src="img/question-15.jpg" alt="" />
						<ul class="answer-box">
							<li>
								<span class="item">A</span>
								<span class="answer"><i class="ui-finger-7"></i></span>
							</li>
							<li>
								<span class="item">B</span>
								<span class="answer"><i class="ui-finger-8"></i> </span>
							</li>
							<li data-type="1">
								<span class="item">C</span>
								<span class="answer"><i class="ui-finger-9"></i></span>
							</li>
							<li>
								<span class="item">D</span>
								<span class="answer"><i class="ui-finger-10"></i></span>
							</li>
						</ul>
					</div>
					
					<div class="question question-7">
						<img src="img/question-16.jpg" alt="" />
						<ul class="answer-box">
							<li>
								<span class="item">A</span>
								<span class="answer">有什么可以帮您</span>
							</li>
							<li>
								<span class="item">B</span>
								<span class="answer">撩拨头发</span>
							</li>
							<li data-type="1">
								<span class="item">C</span>
								<span class="answer">您请便 </span>
							</li>
							<li>
								<span class="item">D</span>
								<span class="answer">无奈的摊手 </span>
							</li>
						</ul>
					</div>
					
					<div class="question question-8">
						<img src="img/question-17.jpg" alt="" />
						<ul class="answer-box">
							<li>
								<span class="item">A</span>
								<span class="answer">笑着哭</span>
							</li>
							<li>
								<span class="item">B</span>
								<span class="answer">辣眼睛</span>
							</li>
							<li>
								<span class="item">C</span>
								<span class="answer">挠痒痒</span>
							</li>
							<li data-type="1">
								<span class="item">D</span>
								<span class="answer">破涕为笑</span>
							</li>
						</ul>
					</div>
					
					<div class="question question-9">
						<img src="img/question-18.jpg" alt="" />
						<ul class="answer-box">
							<li data-type="1">
								<span class="item">A</span>
								<span class="answer"><i class="ui-emoji-5"></i></span>
							</li>
							<li data-type="1">
								<span class="item">B</span>
								<span class="answer"><i class="ui-emoji-5"></i></span>
							</li>
							<li data-type="1">
								<span class="item">C</span>
								<span class="answer"><i class="ui-emoji-5"></i></span>
							</li>
							<li data-type="1">
								<span class="item">D</span>
								<span class="answer"><i class="ui-emoji-5"></i></span>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<!--答题结果页-->
			<div class="page page-5">
				<span class="ui-logo-g"></span>
				<div class="result">
					<img src="img/result.png" alt="" />
					<span class="num"></span>
				</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-lottery"></a>
				</div>
			</div>
		</div>
		
		<!--答对题不够5题-->
		<div class="layer layer-nomatch">
			<div class="content">
				<span class="ui-fail"></span>
				<p>很遗憾<br />您的正确率不够哦</p>
				<a href="javascript:void(0);" class="replay">重新答题</a>
			</div>
		</div>
		
		<!--抽奖弹窗-->
		<div class="layer layer-lottery">
			<div class="content">
				<!--<span class="num">10</span>-->
				<p>恭喜你<br />答对<span class="num"></span>题<br />获得了<span class="times">1</span>次抽奖机会</p>
				<a href="javascript:void(0);" class="ui-box"></a>
				<div class="btn-group">
					<a href="javascript:void(0);" class="free">免积分抽奖</a>
					<a href="javascript:void(0);" class="jifen">10积分抽奖</a>
				</div>
			</div>
		</div>
		
		<!--未中奖-->
		<div class="layer layer-fail">
			<div class="content">
				<span class="ui-fail"></span>
				<span class="ui-txt-4"></span>
				<a href="javascript:void(0);" class="replay">重新答题</a>
			</div>
		</div>
		
		<!--中奖非会员-->
		<div class="layer layer-register">
			<div class="content">
				<span class="ui-txt-6"></span>
				<p class="prizeName"></p>
				<div class="ui-form">
					<input type="tel" id="phone" maxlength="11"/>
					<input type="tel" id="authcode"/>
					<div class="getCode">
						<a href="javascript:void(0);" class="ui-get"></a>
						<span class="countDown"></span>
					</div>
				</div>
				<a href="javascript:void(0);" class="ui-bind"></a>
			</div>
		</div>
		
		<!--注册会员成功后提示-->
		<div class="layer layer-tip">
			<div class="content">
				<span class="ui-hand"></span>
				<span class="ui-txt-5"></span>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-invit"></a>
					<a href="javascript:void(0);" class="replay">重新答题</a>
				</div>
			</div>
		</div>
		
		<!--中奖会员-->
		<div class="layer layer-success">
			<div class="content">
				<span class="ui-txt-6"></span>
				<p class="prizeName"></p>
				<span class="ui-txt-7"></span>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-invit"></a>
					<a href="javascript:void(0);" class="replay">重新答题</a>
				</div>
			</div>
		</div>
		
		<!--积分抽奖非会员-->
		<div class="layer layer-register2">
			<div class="content">
				<span class="ui-txt-8"></span>
				<div class="ui-form">
					<input type="tel" id="phone" maxlength="11"/>
					<input type="tel" id="authcode"/>
					<div class="getCode">
						<a href="javascript:void(0);" class="ui-get"></a>
						<span class="countDown"></span>
					</div>
				</div>
				<a href="javascript:void(0);" class="ui-bind" data-type="pure"></a>
			</div>
		</div>
		
		<!--完善资料-->
		<div class="layer layer-info">
			<div class="content">
				<div class="ui-info">
					<form action="#" id="infoForm">
						<input type="text" id="username" name="username"/>
						<input type="radio" name="sex" value="0" checked class="male"/>
						<input type="radio" name="sex" value="1" class="female"/>
						<input type="date" id="birth" name="birth"/>
					</form>
				</div>
				<a href="javascript:void(0);" class="ui-complete"></a>
			</div>
		</div>
		
		<!--分享层-->
		<div class="share-box">
			<img src="img/share.png" alt="" />
		</div>
		
		<script src="js/zepto.min.js"></script>
		<script src="js/layer_mobile/layer.js"></script>
		<script src="js/audio.js"></script>
		<script src="js/index.js"></script>
		<script>
			var mp3 = audio.create({
		        audio: ['audio/bgm.mp3'],
		        autoPlay: false,
		        loop: true,
		        end: function(cur, length) {
		        }
		   	});
		   	document.addEventListener("WeixinJSBridgeReady", function () {
	            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
	            	mp3.play();
	            });
	        }, false);
	        
	        $(".music").click(function(){
	        	$(this).toggleClass("pause");
	        	mp3.playPause();
	        })
		</script>
	</body>
</html>